<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer" />
    <title>工大社区</title>
    <!-- jquery -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <style>
        .row {
            margin-top: -40px
        }
        .container-fluid {
            padding-top: 36px;
            margin-top: 37px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: 37px;
            margin-top: 1px;
        }
        body {
            background-color: #F7F6F7;
        }

    </style>
</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!-- 左边----帖子列表 -->
        <div class="col-xs-12 col-lg-9 col-md-12">
            <h3>
                <span class="glyphicon glyphicon-list" aria-hidden="true" style="margin-right: 8px;"></span>
                <span>发现</span>
            </h3>
            <hr style="margin-bottom: -16px;margin-top: 13px;">
            <ul class="nav nav-tabs" style="font-size: 18px;margin-top: 15px;margin-left: -16px;margin-bottom: 12px;">
                <li role="presentation" th:class="|${flag == 0 ? 'active' : ''}|">
                    <a th:href="@{/}"><h5>最新</h5></a>
                </li>
                <li role="presentation" th:class="|${flag == 1 ? 'active' : ''}|">
                    <a th:href="@{/index/theHottestPosts}"><h5>最热</h5></a>
                </li>
                <li role="presentation" th:class="|${flag == 2 ? 'active' : ''}|">
                    <a th:href="@{/index/dayHotPostRank}"><h5>日排行</h5></a>
                </li>
                <li role="presentation" th:class="|${flag == 3 ? 'active' : ''}|">
                    <a th:href="@{/index/weekHotPostRank}"><h5>周排行</h5></a>
                </li>


            </ul>
            <!--            帖子-->
            <ul class="media-list">
                <li class="media" th:each="postDTO:${posts.getPostDTOList()}">
                    <div class="media-left">
                        <a th:href="@{|/profile/myself/${postDTO.getUser().id}|}">
                            <img class="img-circle" th:src="${postDTO.getUser().avatar}" alt="..."
                                 style="height: 46px; width: 46px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <a th:href="@{|/post/detail/${postDTO.getPost().getPostId}|}" style="white-space:nowrap;">
                            <h4 style="white-space:nowrap; display : inline" class="media-heading" th:text="${postDTO.getPost().title}">标题</h4>
                        </a>
                        <div style="float: right">
                            <span th:if="${postDTO.getPost().type == 2}" class="label label-danger">置顶</span>

                            <span th:if="${postDTO.getPost().type == 1}" class="label label-danger">精</span>
                        </div>
                        <br>

                        <div style="margin-top: 7px;">
                            <div style="float: left; color: #999" th:text="${postDTO.getUser().nickName}">
                                作者名字
                            </div>
                            <div style="float: right; color: #999">
                                <span th:text="${#dates.format(postDTO.getPost().createTime, 'yyyy-MM-dd')}">发布时间</span>&nbsp;·&nbsp;
                                <span th:text="${postDTO.getPost().likeCount}">11</span>
                                <span></span>个点赞&nbsp;·&nbsp;
                                <span th:text="${postDTO.getPost().commentCount}">54</span>个评论&nbsp;·&nbsp;
                                <span th:text="${postDTO.getPost().viewCount}">11</span>个浏览
                            </div>
                        </div>


                    </div>
                </li>

            </ul>
            <!--            分页-->
            <div th:replace="common/common::pagination"></div>
        </div>
        <!--右边 热门帖子-->
        <div th:replace="common/common::currentHotPostRank"></div>

    </div>
</div>


</body>
<script>
    function search() {
        var searchValue = $("#searchValue").val();
        $.get("http://localhost:8887/bbs/post/search?key=" + searchValue, function ()  {

        });
    }
</script>
</html>